iT邦幫忙

2022 iThome 鐵人賽

DAY 11
0
自我挑戰組

小白網頁設計練成記系列 第 11

小白網頁設計練成記-DAY11-淺談form表單2

  • 分享至 

  • xImage
  •  

延續前章節,我們繼續討論< form >表單的子標籤

< textarea >多行輸入

跟 < input > 標籤不同的是,需要有關閉標籤 < /textarea >。

rows 行數
cols 列數

<form>
    <textarea name="message" cols="30" rows="10"></textarea>
</form>

下拉選單 、、
option 單個選項內容
可加上 selected 屬性,表示為預設選項。
optgroup 分組選項內容,但本身並不可選
label 標籤是強制的,會顯示在選項中

表單屬性

某些屬性是可以共用的,但並不是所有 input 的類型都可以擁有這些屬性,以下列出幾個最常見的屬性:

name 如想要正確的提交表單,要記得每個輸入項目都要帶有 name 屬性。
value 預設內容
< input > 沒有關閉標籤,所以內容是寫在 value 屬性值上面,但通常會用 placeholder 代替。
disabled 禁止作用
required 表示為必填項目
plceholder 表單內的提示文字,當使用者開始輸入文字就會消失
根據 MDN - Labels_and_placeholders 的解釋,盡量以 <label> 標籤取代 placeholder,或者兩者以一起用,以防止使用者輸入到一半忘記表單的用途。
maxlength 控制輸入框的最大字數,適用於 text & password
checked 預設選項,適用於 radio & checkbox
selected 預設選項,適用於 <option>


上一篇
小白網頁設計練成記-DAY10-淺談HTML-<input>
下一篇
小白網頁設計練成記-DAY12-淺談HTML表格
系列文
小白網頁設計練成記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言